<!-- Dom模板 -->
<template>
    
  <div class="edit">
        <!-- Dom内容 -->
        <el-form ref="form" :model="data" label-width="80px">
      <el-form-item label="活动编号">
        <el-input v-model="data.id" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="活动标题">
        <el-input v-model="data.title"></el-input>
      </el-form-item>
      <el-form-item
        label="活动封面"
        :rules="[{ required: true }]"
      >
        <img  :src="data.img" class="avatar" />
      </el-form-item>
      <el-form-item
        label="活动状态"
        :rules="[{ required: true }]"
      >
        下线
        <el-switch v-model="data.type"></el-switch>
        上线
      </el-form-item>
    </el-form>
      <div class="btn">
          <el-row>
            <el-button type="primary" style="background: #38a28a"
            @click="changeData"
              >确定</el-button
            >
          </el-row>
          <el-row>
            <el-button
              type="primary"
              style="background: #eaeaea; color: black"
              @click="closePop"
              >取消</el-button
            >
          </el-row>
        </div>
  </div>
</template>

<script>
// import a from './a'; // 引入组件
export default {
  name: "",
  data() {
    return {
      msg: "测试",
      data:''
    };
  },
  props: ["editData","closePop","getEditData"], // 生命周期 - 创建完成（访问当前this实例）
  created() {
    this.data = JSON.parse(JSON.stringify(this.editData))
  }, // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    
  }, 
  // Vue方法定义
  methods: {
    changeData(){
      this.getEditData(this.data)
      this.closePop()
    },
      // 弹框 加图片
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    // 图片设置
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isLt2M;
    },
  },
};
</script>

<style scoped>
/* @import url(''); 引入css类 */
.edit {
  z-index: 99;
  width: 400px;
  height: 500px;
  box-sizing: border-box;
  background: #eaeaea;
  border-radius: 10px;
  padding: 10px;
  position: fixed;
  left: 50%;
  margin-left: -200px;
  top: 50%;
  margin-top: -250px;
  border: 1px solid #ccc;
}
img{
  width: 150px;
  height: 150px;
}
.btn {
  width: 100%;
  display: flex;
}
.btn button {
  margin: 10px;
}
</style>